import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

/**
 * CustomScrollView是可以使用sliver自定义滚动模型（效果）的widget。
 * 其中sliver包括SliverList、SliverFixedExtentList、SliverGrid、
 * SliverPadding、SliverAppBar，对于大多数Sliver来说，
 * 它们和可滚动Widget最主要的区别是Sliver不会包含Scrollable Widget，
 * 也就是说Sliver本身不包含滚动交互模型。
 * 因此，CustomScrollView可以将它们组合起来，统一控制滚动。
 */
class CustomScrollViewDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      /*appBar: AppBar(
        title: Text('CustomScrollView'),
        centerTitle: true,
      ),*/
      body: CustomScrollView(
        slivers: <Widget>[
          SliverAppBar(
            //设置为true时，当SliverAppBar内容滑出屏幕时，将始终渲染一个固定在顶部的收起状态
            pinned: true,
            //左侧控件，通常情况下为"返回"图标
            leading: Icon(Icons.arrow_back),
            //展开区域的高度
            expandedHeight: 250,
            //展开和折叠区域
            flexibleSpace: FlexibleSpaceBar(
              title: Text('CustomScrollView'),
              background: Image.network(
                'http://pic38.nipic.com/20140228/2457331_083845176000_2.jpg',
                fit: BoxFit.cover,
              ),
            ),
          ),
          //sliver组件内边距
          SliverPadding(
            padding: EdgeInsets.all(10),
            sliver: SliverGrid(
              delegate: SliverChildBuilderDelegate(
                  (context, index) => Container(
                        color: Colors.lightBlueAccent,
                      ),
                  childCount: 15),
              gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                  //每行2个
                  crossAxisCount: 3,
                  //主轴(竖直)方向间距
                  mainAxisSpacing: 20.0,
                  //纵轴(水平)方向间距
                  crossAxisSpacing: 10,
                  //纵轴缩放比例
                  childAspectRatio: 5.0 / 2.0),
            ),
          ),
          SliverFixedExtentList(
              delegate: SliverChildBuilderDelegate(
                  (context, index) => ListTile(
                        title: Text('标题$index'),
                      ),
                  childCount: 10),
              itemExtent: 40),
          SliverList(
              delegate: SliverChildBuilderDelegate(
                  (context, index) => ListTile(
                        title: Text('标题$index'),
                      ),
                  childCount: 10))
        ],
      ),
    );
  }
}
